<template>
<div class="about">
  <!-- 模板中我们不需要.value, 在编译模板会自动.value -->
  <h3>count: {{count}}</h3>
  <h3>doubleCount: {{doubleCount}}</h3>
  <h3>doubleCount: {{doubleCount2}}</h3>


  <button @click="update">增加1</button>
</div>
</template>

<script lang="ts" setup>
  import { computed, ref } from "vue";

  const count = ref<number>(2)  

  // 使用计算属性  只有getter
  const doubleCount = computed(() => {
    console.log('doubleCount computed')
    return count.value * 2
  })

  // 使用计算属性 getter/setter
  const doubleCount2 = computed<number>({
    get () {
      console.log('doubleCount2 get')
      return count.value * 3
    },
    set (value) {
      console.log('doubleCount2 set', value)
      count.value = value/6
    }
  })


  const update = () => {
    count.value += 1

    setTimeout(() => {
      doubleCount2.value = 12
    }, 2000);
  }
</script>
